<template>
    <div class="supplier">
        <el-card class="main">
            <!-- 顶部按钮 -->
            <div class="supplierBtn">
                <div class="left">
                    <el-button type="success" size="small" @click="addSupplier">
                        <i class="el-icon-plus"></i>
                        新增</el-button>
                    <el-button type="primary" size="small" @click="transferModal">
                        <i class="el-icon-sort"></i>
                        转交</el-button>
                    <el-button type="info" size="small"
                        @click="searchDialogVisible = true">
                        <i class="el-icon-search"></i>
                        高级搜索</el-button>
                        <el-button type="info" size="small" @click="resetList">
                        <i class="el-icon-refresh-left"></i>
                        重置</el-button>
                    <download-excel style="display:inline-block;margin-left:10px;"
                        :data="json_data" :fields="json_fields" :header="headers"
                        :name="name">
                        <el-button type="success" size="small" @click="exportTable">
                            <i class="el-icon-upload"></i>
                            导出</el-button>
                    </download-excel>
                </div>
                <div class="right">
                    <el-input placeholder="请输入内容" class="input-with-select"
                        v-model="normalSearchInput">
                        <el-button slot="append" icon="el-icon-search"
                            @click="normalSearch"></el-button>
                    </el-input>
                </div>

            </div>
            <!-- 供应商列表 -->
            <div class="supplierList">
                <el-table ref="multipleTable" :data="tableData"
                    tooltip-effect="dark" style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="45">
                    </el-table-column>
                    <el-table-column prop="providerType" label="类型"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="name" label="供应商名称" width="120">
                    </el-table-column>
                    <el-table-column prop="level" label="级别" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="employeeNum" label="员工数量"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="province" label="省市"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="address" label="详细地址"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="contact" label="联系人"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="username" label="负责人"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="120">
                    </el-table-column>
                    <!-- <el-table-column prop="address" label="跟进"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="product" label="产品"
                        show-overflow-tooltip>
                    </el-table-column> -->
                    <el-table-column prop="status" label="状态" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-tag disable-transitions type="success"
                                v-if="scope.row.status == 0">有效</el-tag>
                            <el-tag disable-transitions type="info"
                                v-if="scope.row.status == 1">无效</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" align="center"
                        width="180">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini"
                                @click="goChange(scope.row)">
                                修改
                            </el-button>
                            <el-button type="danger" size="mini"
                                @click="deleteSupplier(scope.row.id)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页器 -->
                <Pagination :total="total" :pageSize="pageSize"
                    @getPagination="getPagination"></Pagination>
            </div>


            <!-- 模态框——转交 -->
            <el-dialog title="选择转交对象" :visible.sync="transferDialogVisible">
                <el-card>
                    <el-form size="small" class="searchForm">
                        <el-row :gutter="20">
                            <el-col :span="20">
                                <el-form-item>
                                    <span slot="label">
                                        <span class="labelText">部门</span>
                                    </span>
                                    <div class="choose">
                                        <el-select placeholder="请选择部门"
                                            v-model="transForm.depId"
                                            @change="getDepPerson">
                                            <el-option
                                                v-for="item in transForm.departments"
                                                :label="item.depName" :value="item.depId"
                                                :key="item.depId"></el-option>
                                        </el-select>
                                    </div>
                                </el-form-item>

                                <el-form-item>
                                    <span slot="label">
                                        <span class="labelText">人员</span>
                                    </span>
                                    <div class="choose">
                                        <el-select v-model="transferData.userId"
                                            placeholder="请选择人员">
                                            <el-option
                                                v-for="item in transForm.staffs"
                                                :label="item.realName"
                                                :value="item.id"
                                                :key="item.id"></el-option>
                                        </el-select>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item class="subBtn">
                            <el-button type="primary"
                                @click="transfer">转交</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-dialog>

            <!-- 模态框——高级搜索 -->
            <el-dialog title="高级搜索" :visible.sync="searchDialogVisible">
                <el-card>
                    <el-form size="small" class="searchForm">
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item>
                                    <span slot="label">
                                        <span class="labelText">类型</span>
                                    </span>
                                    <div class="choose">
                                        <el-select v-model="searchForm.type"
                                            placeholder="请选择类型">
                                            <el-option label="公海"
                                                value="1"></el-option>
                                            <el-option label="私海"
                                                value="0"></el-option>
                                        </el-select>
                                    </div>
                                </el-form-item>
                                <el-form-item>
                                    <span slot="label">
                                        <span class="labelText">供应商名称</span>
                                    </span>
                                    <el-input v-model="searchForm.providerName"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <span slot="label">
                                        <span class="labelText">时间起</span>
                                    </span>
                                    <el-input
                                        v-model="searchForm.startTime"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item>
                                    <span slot="label">
                                        <span class="labelText">状态</span>
                                    </span>
                                    <div class="choose">
                                        <el-select v-model="searchForm.status"
                                            placeholder="请选择状态">
                                            <el-option label="有效"
                                                value="0"></el-option>
                                            <el-option label="无效"
                                                value="1"></el-option>
                                        </el-select>
                                    </div>
                                </el-form-item>
                                <el-form-item>
                                    <span slot="label">
                                        <span class="labelText">负责人</span>
                                    </span>
                                    <el-input
                                        v-model="searchForm.userName"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <span slot="label">
                                        <span class="labelText">时间止</span>
                                    </span>
                                    <el-input
                                        v-model="searchForm.stopTime"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item class="subBtn">
                            <el-button type="primary"
                                @click="searchSubmit">搜索</el-button>
                            <el-button @click="resetSearch">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-dialog>


        </el-card>

    </div>
</template>

<script>

import Pagination from '@/components/Pagination'
export default {
    name: '',
    components: {
        Pagination
    },
    data() {
        return {
            //分页器
            total: 0,
            currentPage: 1,
            pageSize: 10,
            default:0,
            //列表数据
            tableData:
                [
                ],
            //高级查找
            searchDialogVisible: false,
            searchForm: {
                "currentPage": "",
                "stopTime": "",
                "providerName": "",//供应商名字
                "pageSize": "",
                "startTime": "",
                "status": "",
                "type": "",//类型
                "userName": ''
            },
            //普通查找
            normalSearchInput: '',
            //转交——被选择的数据
            transferDialogVisible: false,
            //选择人员
            transForm: {
                departments: [],
                staffs: [],
                depId: '',
            },
            //
            //转交提交数据
            transferData: {
                "providerIds": [
                    0
                ],
                "userId": 0
            },
            //导出清单需要数据
            headers: '供应商列表',
            name: '供应商清单',
            //配置表格标题字段对应文字
            json_fields: {
                // "订单编号":"code",
                //数字处理--
                "类型": "providerType",
                "供应商名称": "name",
                "级别": 'level',
                "员工数量": 'employeeNum',
                "省市": 'province',
                "详细地址": 'address',
                "联系人": 'contact',
                "负责人": 'username',
                "创建时间": 'createTime',
                "状态": 'status',
            },
            json_data: [],

        }
    },
    created() {
        this.getSupperList(this.currentPage, this.pageSize)
    },

    methods: {
        //---------------获取供应商列表
        async getSupperList(currentPage, pageSize) {
            let res = await this.$api.supply.getAllSupplierList({ currentPage, pageSize })
            //供应商列表
            console.log(res.data.data.list);
            if (res.data.code === 200) {
                this.tableData = res.data.data.list;
                this.json_data=this.tableData;
                //页码
                this.total = res.data.data.total;
                this.default=res.data.data.total;
            } else {
                console.log('请求失败');
                this.tableData = []
                this.pageSize = 0;
                this.total = 1;
            }
        },
        //--------------获取点击的页码
        getPagination(page) {
            console.log('----', page);
            this.currentPage = page;
            if(this.total==this.default){
                 this.getSupperList(this.currentPage, this.pageSize);
            }else{
                //高级查找
                this.searchSubmit()
            }
           
        },
        //-------重置
        resetList(){
            this.getSupperList(this.currentPage, this.pageSize)
        },
        //-------新增供应商
        addSupplier() {
            this.$router.push('/supply/addSupplier')
        },
        //-------转交模态框
        transferModal() {
            this.transferDialogVisible = true
            this.getDepInfo();
            // let res=this.$api.supply.
        },
        //-------转交获取部门数据
        getDepInfo() {
            this.$api.supply.getDepList().then(resp => {
                console.log(resp);
             this.transForm.departments=resp.data.data
            })
        },
        getDepPerson(){
            let depId=this.transForm.depId
            this.$api.supply.getDepPerson(depId).then(resp=>{
                    // console.log(resp) 
            this.transForm.staffs=resp.data.data
                })
        },
        //-------转交提交功能
        async transfer() {
            console.log(this.transferData);
            let res = await this.$api.supply.transfer(this.transferData)
            this.getSupperList(this.currentPage, this.pageSize)
            this.transferDialogVisible=false
        },
        //-------高级搜索提交
        async searchSubmit() {
            this.searchForm.currentPage=this.currentPage;
            this.searchForm.pageSize=this.pageSize;
            let res = await this.$api.supply.findAdvanced(this.searchForm); 
             this.tableData=res.data.data;
            this.searchDialogVisible=false;
            console.log(res);
        },
        //------高级搜索重置
        resetSearch(){
            this.searchForm={
                "currentPage": 1,
                "stopTime": "",
                "providerName": "",//供应商名字
                "pageSize": 10,
                "startTime": "",
                "status": "",
                "type": "",//类型
                "userName": ''
            }
        },
        //导出
        exportTable() {
            this.json_data = this.tableData;
        },
        //-------普通查找
        async normalSearch() {
            let res =await this.$api.supply.findSupplier(this.currentPage,this.pageSize,this.normalSearchInput.toString());
            this.tableData = res.data.data.list;
            this.total=res.data.data.total
            // console.log(res);
        },
        //列表单选多选
        handleSelectionChange(val) {
            let arr = [];
            val.forEach(function (item) {
                arr.push(item.id)
            })
            this.transferData.providerIds = arr
        },
        //进入修改页面
        goChange(row) {
            this.$router.push({ path: '/supply/editSupplier', query: row })
        },
        //删除供应商
        deleteSupplier(id) {
            this.$confirm('此操作将删除该供应商, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 执行删除
                this.deleteConfirm(id)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        async deleteConfirm(providerId) {
            console.log(providerId);
            let id = providerId.toString();
            let res = await this.$api.supply.deleteSupplierById(id)
            console.log('删除单个供应商接口---', res.data);
            if (res.data.code === 200) {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                //更新视图-------------------------
                this.getSupperList(this.currentPage, this.pageSize)
            } else {
                console.log('删除失败');
                this.$message.error('删除失败');
            }
        }

    },
}
</script>

<style scoped>
.supplier .main {
    background-color: rgba(128, 128, 128, 0.1);
}

.main .supplierBtn {
    border-top: 3px solid #ccc;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 5px 10px;
    background-color: #fff;
}

/* element样式修改 */
.choose>>>.el-select {
    display: block;
}

.choose>>>.el-select .el-input__suffix {
    top: 15px;
}
</style>